<template>
	<view class="main">
		<u-navbar height="80" :is-back="false" title="" :border-bottom="false">
			<view class="slot-wrap">
				<u-icon name="close" :size="30" @tap="close"></u-icon>
				<text @tap="toPage('/pages/Help/index')">帮助</text>
			</view>
		</u-navbar>
		<view class="login_title">
			<view class="title">
				手机号登录/注册
			</view>
			<view class="des" v-if="!is_pwd">
				未注册的手机号登录成功后将自动注册
			</view>
			<view class="des_pact" v-else>
				<text>登录即表明同意 </text>
				<text>《用户协议》</text>
				<text>《隐私政策》</text>
			</view>
		</view>
		<u-form :model="form" ref="uForm" class="login_form">
			<u-form-item label="+86" prop="tel">
				<u-input v-model="form.tel" type="number" maxlength="11" placeholder="请输入您的手机号" placeholder-style="fontSize:34rpx"/>
			</u-form-item>
			<u-form-item label="" prop="code" v-if="!is_pwd">
				<u-input v-model="form.code" placeholder="请输入验证码" placeholder-style="fontSize:34rpx"/>
				<view class="seconds" v-if="form.tel">
					<u-verification-code :seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
					<text @tap="getCode">{{tips}}</text>
				</view>
			</u-form-item>
			<u-form-item label="" prop="pwd" v-else>
				<u-input v-model="form.pwd" type="password" placeholder="请输入密码" placeholder-style="fontSize:34rpx"/>
			</u-form-item>
		</u-form>
		<view class="pwd_login" v-if="!is_pwd">
			<text @tap="pwdLogin">密码登录</text>
		</view>
		<button class="submit" @click="submit">提交</button>
		<view class="pact" v-if="!is_pwd">
			<u-checkbox shape="circle" size="24" label-size="24" v-model="form.pact">我已阅读并同意 </u-checkbox>
			<text>《用户协议》</text>
			<text>《隐私政策》</text>
		</view>
		<view class="login_footer">
			<image class="wx" src="../../static/image/ico/wx.png"></image>
			<image src="../../static/image/ico/qq.png"></image>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	export default {
		data() {
			return {
				is_pwd:false,
				tips: '',
				form: {
					tel: '',
					code: '',
					pwd:''
				},
				rules: {
					tel: [
						{ 
							required: true, 
							message: '请输入手机号', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						},
						{
							pattern: /^(?:(?:\+|00)86)?1\d{10}$/, 
							message: '手机号格式不正确', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
					code: [
						{
							required: true, 
							message: '请输入验证码', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						},
						{
							min: 4, 
							message: '验证码不正确', 
							trigger: ['change','blur']
						}
					],
					pwd: [
						{
							required: false, 
							message: '请输入密码', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					]
				}
			}
		},
		onLoad() {
			
		},
		onShow() {
			
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
			
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if(this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						this.$u.toast('验证码已发送');
						this.$refs.uCode.start();
					}, 2000);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
						this.$store.commit('ChangeUserInfo',{});
					}
				});
			},
			// 点击关闭
			close(){
				if(this.is_pwd){
					this.is_pwd = false
					this.rules.code[0].required = true
					this.rules.pwd[0].required = false
					this.$refs.uForm.resetFields()
				}else{
					uni.navigateBack()
				}
			},
			// 切换密码登录
			pwdLogin(){
				
				this.is_pwd = true
				this.rules.code[0].required = false
				this.rules.pwd[0].required = true
				this.$refs.uForm.resetFields()
			},
			// 跳转页面
			toPage(url){
				uni.navigateTo({
				    url: url
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		padding: 0 30rpx;
		/deep/.u-navbar{
			padding: 0 30rpx;
			.slot-wrap{
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex: 1;
				text{
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
				}
			}
		}
		.login_title{
			.title{
				font-size: 48rpx;
				font-weight: 500;
				color: #333333;
				line-height: 67rpx;
			}
			.des{
				font-size: 24rpx;
				color: #888888;
				line-height: 29rpx;
			}
			.des_pact{
				text{
					font-size: 24rpx;
					color: #4A90E2;
					line-height: 33rpx;
				}
				text:nth-child(1){
					color: #888888;
				}
			}
		}
		.login_form{
			margin-top: 88rpx;
			/deep/.u-form-item__message{
				padding-left: 0!important;
			}
			/deep/.uni-input-input{
				font-size: 34rpx;
			}
			/deep/.u-form-item--left__content__label{
				font-size: 34rpx;
				&:after{
					content: '';
					width: 2rpx;
					height: 48rpx;
					background: #D8D8D8;
					position: absolute;
					right:15rpx;
					bottom:calc(50% - 26rpx);
				}
			}
			.seconds{
				text{
					font-size: 34rpx;
					color: #4A90E2;
				}
			}
		}
		.pwd_login{
			text-align: right;
			text{
				font-size: 28rpx;
				font-weight: 400;
				color: #4A90E2;
				line-height: 34rpx;
			}
			margin-top: 66rpx;
		}
		.submit{
			margin-top: 50rpx;
			width: 100%;
			height: 100rpx;
			background: #4A90E2;
			border-radius: 50rpx;
			opacity: 0.5;
			font-size: 34rpx;
			font-weight: 400;
			color: #FFFFFF;
			line-height:100rpx;
		}
		.pact{
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 60rpx;
			font-size: 24rpx;
			color: #4A90E2;
			/deep/.u-checkbox__label{
				color: #888888;
				margin-right: 0!important;
			}
		}
		.login_footer{
			position: fixed;
			left: 0;
			bottom: 92rpx;
			display: flex;
			width: 100%;
			justify-content: center;
			align-items: center;
			.wx{
				margin-right: 60rpx;
			}
			image{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
		}
	}
</style>
